<template>
    <div class="bi-flight-card" :class="{'has-flight-ground': isFlightGround}">
        <div class="bi-flight-card__column">
            <div class="bi-flight-card__title">航班号 {{ data.flightNum }}</div>
        </div>
        <div class="bi-flight-card__column">
            <div class="bi-flight-card__country">
                <span class="bi-flight-card__country-name">{{data.flightStartCountry}}</span>
                <span class="bi-flight-card__country-type">出发国家</span>
            </div>
        </div>
        <div class="bi-flight-card__divide" v-if="!isFlightGround"></div>
        <div class="bi-flight-card__column">
            <div class="bi-flight-card__quotas">
                <div class="bi-flight-card__quotas-item">
                    <span class="bi-flight-card__quotas-label">
                        <i class="bi-flight-card__quotas-icon is-people"></i> 
                        航班{{isFlightGround ? '' : '预计'}}转运人数
                    </span>
                    <span class="bi-flight-card__quotas-target">
                        <span class="bi-flight-card__quotas-value is-weight is-light is-large">{{ data.flightCarryNum || 0 }}人</span>
                    </span>
                </div>
                <div class="bi-flight-card__quotas-item">
                    <span class="bi-flight-card__quotas-label">
                        <i class="bi-flight-card__quotas-icon is-time"></i> 
                        航班{{isFlightGround ? '' : '预计'}}落地时间
                    </span>
                    <span class="bi-flight-card__quotas-target">
                        <span class="bi-flight-card__quotas-value is-weight">{{ data.flightGroundTime }}</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="bi-flight-card__divide" v-if="isFlightGround"></div>
        <div class="bi-flight-card__column" v-if="isFlightGround">
            <template>
                <div class="bi-flight-card__quotas-divide"></div>
                <div class="bi-flight-card__quotas-item">
                    <span class="bi-flight-card__quotas-label">
                        <i class="bi-flight-card__quotas-icon is-address"></i> 
                        分流到隔离点及隔离人数
                    </span>
                </div>
            </template>
            <div class="bi-flight-card__shunt">
                <flight-card-hotels :data="data.flightIsolateInfos">
                    <slot name="hotel" slot="item" slot-scope="scope" v-bind="scope"></slot>
                </flight-card-hotels>
            </div>
        </div>
    </div>
</template>
<script>
import FlightCardHotels from './flight-card-hotels'

export default {
    name: 'BiFlightCard',
    components: {
        FlightCardHotels
    },
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        isFlightGround () {
            if (!this.data.flightGroundTime) {
                return false
            }
            const flightGroupdDate = Date.parse(this.data.flightGroundTime.replace(/\-/g, "/"))
            return flightGroupdDate <= new Date()
        }
    }
}
</script>
<style lang="scss">
.bi-flight-card{
    line-height: 1em;
    &.has-flight-ground{
        .bi-flight-card__quotas{
            padding-bottom: 0;
        }
        .bi-flight-card__country{
            padding-bottom: 12px;
        }
    }
}
.bi-flight-card__column{
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    padding: 0 16px;
    position: relative;
    &:first-child{
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        &:before{
            display: none;
        }
    }
    &:last-child{
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        &:after{
            display: none;
        }
    }
    &:after,
    &:before{
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #fff;
    }
    &:after{
        bottom: -2px;
    }
    &:before{
        top: -2px;
    }
}
.bi-flight-card__title{
    font-size: 20px;
    color: #4D9CFD;
    font-weight: bold;
    font-family: Source Han Sans CN;
    padding: 14px 0 16px 0; 
    line-height: 24px;
    box-sizing: content-box;
    position: relative;
    &:after{
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        height: 1px;
        background-color: #eee;
    }
    &:before{
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url('./icons/flight.png') no-repeat 50% 50%;
        background-size: 100%;
        vertical-align: top;
        margin-right: 6px;
    }
}
.bi-flight-card__country{
    padding: 12px 10px 6px;
}
.bi-flight-card__country-name,
.bi-flight-card__country-type{
    display: block;
    line-height: 1.5em;
}
.bi-flight-card__country-name{
    font-size: 20px;
    font-weight: bold;
}
.bi-flight-card__country-type{
    font-size: 12px;
    color: #858585;
    padding-top: 9px;
}
.bi-flight-card__body{
    padding-top: 12px;
    padding-bottom: 6px;
}
.bi-flight-card__quotas{
    padding-bottom: 12px;
}
.bi-flight-card__quotas-item{
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    padding: 16px 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.bi-flight-card__quotas-label{
    color: #555;
}
.bi-flight-card__quotas-value {
    color: #373737;
    &.is-light{
        color: #4D9CFD;
    }
    &.is-large{
        font-size: 18px;
    }
    &.is-weight{
        font-weight: bold;
    }
}
.bi-flight-card__quotas-icon{
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
    margin-right: 9px;
    margin-top: 2px;
    background-size: 100%;
    &.is-people{
        background-size: 85%;
        background-image: url('./icons/people.svg');
    }
    &.is-time{
        background-image: url('./icons/time.svg');
    }
    &.is-address{
        background-size: 85%;
        background-image: url('./icons/address.svg');
    }
}
.bi-flight-card__shunt{
    padding-bottom: 20px;
    padding-top: 6px;
}
.bi-flight-card__divide{
    height: 24px;
    overflow: hidden;
    position: relative;
    &:after{
        content: '';
        display: block;
        height: 100%;
        background: radial-gradient(circle at right, transparent 10px, #ffffff 0) top right / 51% 100% no-repeat,
        radial-gradient(circle at left, transparent 10px, #ffffff 0) top left / 51% 100% no-repeat;
        filter: drop-shadow(0 0 2px rgba(0,0,0,.2));
    }
    &:before{
        content: '';
        position: absolute;
        left: 15px;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        border-bottom: 1px dashed #396ac7;
        z-index: 3;
    }
}
</style>